<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS3 实现发光边框特效</title>
  <style>
    body {
      margin: 0;
      width: 100vw;
      height: 100vh;
      background: #010326;
    }

    .root {
      --glow_width: 2px;
      --animation_length: 2s;
      --delay_factor: 2;

      position: absolute;
      left: 50%;
      top: 50%;
      width: 300px;
      height: 300px;
      transform: translate(-50%, -50%) rotate(45deg);

      /*  Uncomment the line below to see how this system is set up  */
      /*   border: 1px dashed red; */
      overflow: hidden;
    }

    .side {
      position: absolute;
      top: 0;
      left: 0;
    }

    .side.left,
    .side.right {
      width: var(--glow_width);
      height: 0;
      background: linear-gradient(to bottom,
          transparent,
          #c03225,
          transparent);
      animation: heightAnim var(--animation_length) linear infinite,
        hider calc(var(--delay_factor) * var(--animation_length)) var(--animation_length) infinite;
    }

    .side.top,
    .side.bottom {
      width: 100%;
      height: var(--glow_width);
      background: linear-gradient(to left, transparent, #c03225, transparent);
      animation: widthAnim var(--animation_length) 0s linear infinite,
        hider calc(var(--delay_factor) * var(--animation_length)) var(--animation_length) infinite;
    }

    .side.right {
      left: auto;
      right: 0;
      height: 0;
      animation-delay: calc(var(--animation_length) / 2);
      animation-direction: normal, reverse;
    }

    .side.bottom {
      top: auto;
      bottom: 0;
      width: 0;
      animation-delay: calc(var(--animation_length) / 2);
      animation-direction: normal, reverse;
    }

    @keyframes heightAnim {
      0% {
        height: 0px;
      }

      50% {
        height: 300px;
        transform: initial;
      }

      100% {
        transform: translate(0, 300px);
      }
    }

    @keyframes widthAnim {
      0% {
        width: 0px;
      }

      50% {
        width: 300px;
        transform: initial;
      }

      100% {
        transform: translate(300px, 0px);
      }
    }

    @keyframes hider {

      0%,
      50% {
        opacity: 0;
      }

      51%,
      100% {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <!-- This element is not visible. The DOM is generated by JavaScript -->
  <div class="root" style="display: none">
    <div>
      <div class="side left"></div>
      <div class="side top"></div>
      <div class="side right"></div>
      <div class="side bottom"></div>
    </div>
  </div>
  <script>
    let template = `<div class="root" style="transform: translate(-50%, -50%) rotate({{ value }})">
<div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side right"></div>
    <div class="side bottom"></div>
  </div>
</div>`;

    let segments = 9;
    for (let i = -segments; i < segments; i++) {
      document.body.innerHTML += template.replace(
        "{{ value }}",
        (90 / segments) * i + "deg"
      );
    }

    // document.body.innerHTML += template.replace("{{ value }}", 90/segments * 0 + "deg")
  </script>
</body>

</html>